<template>
    <div id="app" style="display: flex;margin-top: 100px">
        <div id="main" style="width: 600px;height:400px;"></div>
        <div id="pie" style="width: 700px;height:600px;"></div>
    </div>
</template>
<script>

    import request from "../utils/request";

    export default {
        name: "Analysis",
        methods: {
            drawChart() {
// 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("main"));
                let pieChart = this.$echarts.init(document.getElementById("pie"));
// 指定图表的配置项和数据

                let pieOption = {
                    title: {
                        text: '人口饼图'
                    },
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            radius: [50, 250],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: [
                                {value: '', name: ''},
                            ]
                        }
                    ]
                };

                pieChart.setOption(pieOption);

                //柱状图
                let option = {
                    title: {
                        text: "全国各省人口数量"
                    },
                    legend: {
                        top: 'top'
                    },

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis:
                        {
                            type: 'category',
                            data: [],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ,
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            data: [],
                            name: '人数/万',
                            type: 'bar',
                            barWidth: '60%',

                        }
                    ]
                };
// 使用刚指定的配置项和数据显示图表。

                request.get("/area").then(res => {
                    var xAxis1 = new Array()
                    var yAxis1 = new Array();

                    //柱状图
                    for (var i = 0; i < res.data.length; i++) {
                        xAxis1.push(res.data[i].area)
                        yAxis1.push(res.data[i].count)
                    }

                    option.xAxis.data = xAxis1
                    option.series[0].data = yAxis1
                    myChart.setOption(option);

                    //    饼图

                    res.data.forEach(item => {
                        pieOption.series[0].data.push({name: item.area, value: item.count})
                    })
                    pieChart.setOption(pieOption)
                })


            }
        },
        mounted() {
            this.drawChart();
        }
    };
</script>

